<%@ taglib prefix="c" uri="/WEB-INF/tlds/hdiv-c.tld"%>
<%@ taglib prefix="form" uri="/WEB-INF/tlds/hdiv-spring-form-3_0_4.tld"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<c:url value="selecCuenta.html" var="seleccionarCuenta"/>    
<script src="javascript/jquery.displaytag-ajax-1.2.js" type="text/javascript"></script>
    <!--
    <style type="text/css">
    button{
      width:200;
      overflow: visible;
    }
    </style>
    -->
  <script type="text/javascript">  
    
    $(function() {
        $('span.pagelinks>a, table#dispTable>thead>tr>th>a').live('click', function(){
            $.get($(this).attr('href'), function(responseText, status, xmlHttpRequest){
                $('#displayTagDiv').html($('#displayTagDiv', responseText).html());
                
                }
            )            
            return false;
        })
    });
    
    $(document).ready(function(){                
        $.getJSON("<c:url value='selecCuenta.html'/>", {accion : "searchDesMat" },function(data){
            $("#desCuenta").autocomplete({source:data});
        });        
        $("form").submit(function(){
            return false;
        });
        $("#desCuenta").bestupper({
            clear:false
        });
        
        /*$("#codSucuHtb").change(function(){ 
            $("#desMat").val("");
            $.get("<c:url value='selecCuenta.html'/>",{accion:"buscarMatrizBySucursal",codSucuHtb:$("#codSucuHtb").val(),desMat:$("#desMat").val()}, function(responseText, status, xmlHttpRequest){
                $('#displayTagDiv').html($('#displayTagDiv', responseText).html());
                }
            )
            $.getJSON("<c:url value='selecCuenta.html'/>", {accion : "searchDesMat" },function(data){
                $("#desMat").autocomplete({source:data});
            });
        });
        */
        $("#mostrar").click(function(){ 
            /*$.get("<c:url value='selecCuenta.html'/>",{accion:"buscarMatrizBySucursal",codSucuHtb:$("#codSucuHtb").val(),desMat:$("#desMat").val()}, function(responseText, status, xmlHttpRequest){
                $('#displayTagDiv').html($('#displayTagDiv', responseText).html());
                }
            )*/
            $.get("<c:url value='selecCuenta.html'/>",{accion:"buscarCuenta",desCuenta:$("#desCuenta").val()}, function(responseText, status, xmlHttpRequest){
                $('#displayTagDiv').html($('#displayTagDiv', responseText).html());
                }
            )
        });
       
        /*$("#displayTagDiv tr").click(function(event){
            if(event.target.type!=="checkbox"){                                
                hasSentByTrigger = true;
                $(':checkbox', this).trigger('click');                
            }
        });*/
        
        //$(':checkbox').click(function(){alert($(this).val())});
        
        //$("#chkTodos").click(function(){ var checked_status = this.checked;$("input[name='_chk']").each(function(){this.checked = checked_status;}); });
        $("input[name$=checked]").click(function(){ if ($(":checkbox[name$=checked]:not(:checked)").length) $("#chkTodos").attr("checked", false); else $("#chkTodos").attr("checked", true);  });
        /*$("input[name$=chk]").click(function(){
            //alert($(this).val());
            if($(this).is(":checked")){
                //alert("checked");
                $.getJSON("<c:url value='selecCuenta.html'/>", {accion : "selectCodCuenta",codMat: $(this).val()});
            }else{
                //alert("uncheck");
                $.getJSON("<c:url value='selecCuenta.html'/>", {accion : "deselectCodCuenta",codMat: $(this).val()});
            }
        });*/
        /*
        $("#aceptar").click(function(){ 
            self.close();
        });       
        */
        
        $("#aceptar").click(function(){
            $.getJSON("<c:url value='selecCuenta.html'/>", {accion : "getListTipUnidMone", cuenta: "2" },function(listTipUnidMone){
                var sharedObject = {};
                sharedObject.listTipUnidMone = listTipUnidMone;
                window.returnValue = sharedObject;
                self.close();
            });
        });
        
        /*
        if (!$(':checkbox[name=_chk]:not(:checked)').length)
            $("#chkTodos").attr('checked', true);
        */
    });
    /*
    function updateOpener(){
        $('input[name=accion]', window.opener.document).val("cargarFecha");
        $('#testDiv', window.opener.document).html("Correcto");
      }
      */
    function setChkCuenta(checkObj){
        var idChkObj = checkObj.checked;
        //alert("codCuentaVal: "+ idChkCuenta);
        //alert("Check Object: "+ idChkObj);        
        if(idChkObj){
            //alert("checked");
            $.getJSON("<c:url value='selecCuenta.html'/>", {accion : "selectCodCuenta",codMat: checkObj.value});
        }else{
            //alert("uncheck");
            $.getJSON("<c:url value='selecCuenta.html'/>", {accion : "deselectCodCuenta",codMat: checkObj.value});
        }        
    }   
    
    function setChkTodos(checkTodos){
        var booCheckTodos = "Check Object: "+ checkTodos.checked;
        //alert("Todos: "+ booCheckTodos);
        $.get("<c:url value='selecCuenta.html'/>",{accion:"selectTodos",codTodos:checkTodos.checked}, function(responseText, status, xmlHttpRequest){
            $('#displayTagDiv').html($('#displayTagDiv', responseText).html());
            }
        )        
    }
      
  </script>
  

<body>
<form:form modelAttribute="form" name="form" action="${seleccionarCuenta}">
<form:hidden path="accion"/>
<form:hidden path="cliente"/>
    <table id="fullheighttable" width="500" align="center">
        <tr>
            <td align="left" valign="top" class="fondo_modal padtop16left21">
                <table>
                    <%--
                    <tr>
                        <td class="verdana11bazul">Sucursal</td>
                        <td>
                            <form:select path="codSucuHtb">
                                <form:option value="0">TODOS</form:option>
                                      <form:options items="${listSucursales}"
                                                    itemValue="codSucursal"
                                                    itemLabel="desSucursal"/>
                            </form:select>
                        </td>
                        <td></td>
                    </tr>
                    --%>
                    <tr>
                        <td class="verdana11bazul">Cuentas</td>
                        <td>
                            <form:input path="desCuenta" cssClass="fondo_txtbox258"/>
                        </td>
                        <td>
                            <input type="button" class="boton" id="mostrar" value="Mostrar"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="color:red;font-weight:bold;text-align:left;">
                        Lista de Cuentas
                        </td>
                    </tr>                    
                    <tr>
                        <td colspan="3">
                        <input type='checkbox' id='chkTodos' onclick='setChkTodos(this)'/> Todos
                        <div id="displayTagDiv">                        
                        <c:set var="count" value="0"/>
                        <display:table name="listCuentas" class="its" 
                                       pagesize="10" id="cuenta"
                                       requestURI="/selecCuenta.html">
                            
                            <display:column style="width:30px;text-align:left;" title="Sel">
                                <c:set var="count" value="${count+1}"/>
                                 <input type="checkbox" id="_chk${cuenta.numero}" name="_chk" value="${cuenta.numero}" onclick="setChkCuenta(this);" ${cuenta.chkMarca}/> 
                            </display:column> 
                            <display:column style="width:410px;text-align:left;" property="descripcion" title="Descripcion"/>
                        </display:table>
                        </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">                
                            &nbsp;
                        </td>
                    </tr>                    
                    <tr>
                        <td colspan="3" align="center">                
                            <input type="button" value="Aceptar" id="aceptar" class="boton"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr><td>
            <div id="matrices"></div>
        </td></tr>
    </table>
</form:form>
</body>